<template>
  <div class="info-detail">
    <div class="base-info">
      <div class="title">
        <div class="name">{{ infoContent.name }}</div>
        <div class="price">{{ infoContent.price }}</div>
      </div>

      <div class="desc">
        <div class="scope">
          <span>{{ `招${infoContent.number}人` }}</span>
          <span>{{ infoContent.record }}</span>
          <span>{{ `${infoContent.year}年` }}</span>
        </div>

        <div class="address">
          <span>{{ infoContent.address }}</span>
          <span>{{ infoContent.createTime }}</span>
        </div>
      </div>
    </div>

    <div class="company-info">
      <div class="title">公司信息</div>
      <div class="name">{{ infoContent.companyInfo.name }}</div>
      <div class="desc">{{ infoContent.companyInfo.desc }}</div>
    </div>

    <div class="career-info">
      <div class="title">职位描述</div>
      <div class="tags">
        <van-tag
          v-for="(item, index) in infoContent.careerInfo.tags"
          :key="index"
          class="tag-item"
          color="#F5F5F5"
          text-color="#666666"
        >{{ item }}</van-tag>
      </div>
      <div class="content" v-html="infoContent.careerInfo.content" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tag } from 'vant'

Vue.use(Tag)

export default {
  data() {
    return {
      infoContent: {
        companyInfo: {},
        careerInfo: {}
      }
    }
  },

  mounted() {
    this.fetch()
  },

  methods: {
    fetch() {
      this.infoContent = {
        name: 'JavaScript 开发工程师',
        price: '1-1.5万/月',
        record: '本科',
        number: '1',
        year: '3-5',
        address: '上海 - 虹口区',
        createTime: '3天前',

        companyInfo: {
          name: '链盟上海数字科技有限公司',
          desc: '民营公司 | 150-500人 | 互联网/电子商务'
        },

        careerInfo: {
          tags: ['专业培训', '读书补贴', '其他'],
          content:
            '岗位职责: <br />1、负责网页和移动产品界面的视觉图形设计;<br />2、分析业务需求，并加以分解归纳出产品人机交互界面需求;<br />3、参与互联网产品设计体验、流程的制定和规范;<br />4、参与公司品牌，Logo, VI 等设计;<br />5、负责互联网产品整体表现风格的定位，对产品视觉感受做整体把握;<br /><br />职位要求:<br />1、两年以上UI设计工作经验，美术、设计、计算机相关专业;<br />2、有良好的美术功底与创作能力，手绘能力强，具备原画功底和动画设计(类似直播礼物效果)能力;<br />3、对UI布局和交互有设计、规划能力，能准确把握产品的整体风格和色彩;<br />4、精通使用PS、Al、 AE、Sketch 等设计软件;<br />5、具有良好的团队合作意识，较强的自主学习能力，表现力强;<br /><br />面试要求:<br />1、面试需带作品;<br />2、做好现场速绘的准备(可 自带电脑) '
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.info-detail {
  padding: 27px 17px;

  .base-info {
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 500;

      .name {
        font-size: 21px;
        color: #222222;
      }

      .price {
        font-size: 16px;
        color: #4586ff;
      }
    }

    .desc {
      margin-top: 12px;
      font-size: 13px;
      color: #999999;

      .scope {
        span {
          margin-right: 25.5px;

          &:last-child {
            margin: 0;
          }
        }
      }

      .address {
        display: flex;
        justify-content: space-between;
        margin-top: 13.5px;
      }
    }
  }

  .company-info {
    margin-top: 32px;

    .title {
      font-size: 16px;
      color: #333333;
      font-weight: 500;
    }

    .name {
      font-size: 15px;
      margin-top: 5.5px;
      font-size: 15px;
    }

    .desc {
      margin-top: 5.5px;
      font-size: 13px;
      color: #999999;
    }
  }

  .career-info {
    margin-top: 40.5px;

    .title {
      font-size: 16px;
      color: #333333;
      font-weight: 500;
    }

    .tags {
      margin-top: 8.5px;

      &:last-child {
        margin: 0;
      }

      .tag-item {
        margin-right: 7px;
      }
    }

    .content {
      font-size: 13px;
      color: #666666;
      line-height: 22px;
      margin-top: 10px;
    }
  }
}
</style>